<script setup>
import HomeBanner from '../components/home/HomeBanner.vue';
import { onMounted, ref } from 'vue';
import { getRecommendListApi } from '../api/products';
import RecommendProducts from '../components/home/RecommendProducts.vue';


// 创建响应式变量
const recommendList = ref([]);        // 推荐商品列表数据
const refreshing = ref(false);        // 下拉刷新状态
const loading = ref(false);           // 数据加载状态
const limit = ref(4);                 // 每页加载的商品数量
const hasMore = ref(true);            // 是否还有更多数据可加载
const currentPage = ref(1);           // 当前页码

// 获取商品数据的异步函数
const getProducts = async (page = 1) => {
    // 如果是第一页，设置加载状态为 true
    if (page === 1) {
        loading.value = true;
    }
    try {
        // 调用 API 获取推荐商品列表
        const res = await getRecommendListApi({
            page,                    // 页码参数
            limit: limit.value       // 每页数量参数
        })
        // 根据页码处理数据：第一页直接赋值，其他页追加数据
        if (page === 1) {
            recommendList.value = res.data
        } else {
            recommendList.value.push(...res.data)
        }
        // 判断是否还有更多数据（当前数据长度 < 总数据量）
        hasMore.value = recommendList.value.length < res.pagination.total
        // 更新当前页码
        currentPage.value = page
    } finally {
        // 无论成功或失败，最后都关闭加载状态
        loading.value = false;
    }
};

// 加载更多数据的函数
const loadMore = async () => {
    // 如果没有更多数据或正在加载中，则不执行
    if (!hasMore.value || loading.value) return
    // 加载下一页数据
    await getProducts(currentPage.value + 1)
};

// 下拉刷新处理函数
const onRefresh = async () => {
    // 设置刷新状态为 true
    refreshing.value = true;
    // 重新加载第一页数据
    await getProducts()
    // 刷新完成后设置刷新状态为 false
    refreshing.value = false;
};

// 组件挂载时执行，初始化加载数据
onMounted(() => {
    getProducts()
});

// 暴露方法给父组件调用
defineExpose({
    getProducts,
    onRefresh
});

</script>

<template>

    <div class="home-view">
        <van-pull-refresh v-model="refreshing" pulling-text="下拉刷新" loosing-text="加载中···" success-text="加载成功"
            @refresh="onRefresh">
            <div class="content">
                <!-- 轮播图 -->
                <div class="banner-wrapper">
                    <HomeBanner />
                </div>

                <!-- 推荐商品列表 -->

                <div class="products-wrapper">
                    <template v-if="!loading && recommendList.length">
                        <RecommendProducts title="商品列表" layout="grid" :products="recommendList" :hasMore="hasMore"
                            :loading="loading" @load-more="loadMore" />
                    </template>
                </div>


                <!--
            在条件判断中隐式转换
            1. 布尔值
            2. 数值 0 false  1 true
            3. 字符串 '' false  '0' true
            4. 空对象 true
            5. 空数组 true
            6. null false
            7. undefined false
            8. NaN false
            -->
                <!-- 骨架屏 -->
                <template v-if="loading && !recommendList.length">
                    <div class="skeleton-container">
                        <van-skeleton :row="4" v-for="item in 4" :key="item" />
                    </div>
                </template>
                <div class="no-more" v-if="!hasMore && recommendList.length">
                    就这么多了~~
                </div>
            </div>
        </van-pull-refresh>

    </div>
</template>

<style lang="scss" scoped>
.home-view {
    min-height: 100vh;
    background-color: var(--app-bg-color);
}

.content {
    padding-bottom: 60px;
    /* 为底部导航栏预留更多空间 */
    max-width: 1200px;
    /* 设置最大宽度，避免在大屏幕上过宽 */
    margin: 0 auto;
    /* 居中显示 */
    padding-left: 16px;
    /* 左侧边距 */
    padding-right: 16px;
    /* 右侧边距 */
}

.banner-wrapper {
    margin: 16px 0;
    /* 上下边距 */
    border-radius: 12px;
    /* 圆角 */
    overflow: hidden;
    /* 确保内容不超出圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 轻微阴影效果 */
}

.products-wrapper {
    padding: 0 4px;
    /* 产品列表的内边距 */
    margin-top: 16px;
    /* 与轮播图的间距 */
}

.skeleton-container {
    padding: 20px;
    /* 增加内边距 */
    background-color: var(--van-background-2);
    border-radius: var(--van-radius-md);
    margin: 8px 4px 20px;
    /* 增加外边距 */
    box-shadow: var(--van-shadow-1);

    .van-skeleton {
        margin-bottom: 20px;
        /* 增加骨架屏之间的间距 */

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.loading-more,
.no-more {
    text-align: center;
    padding: 20px 0;
    /* 增加上下内边距 */
    color: var(--van-text-color-3);
    font-size: 14px;
    /* 增加上方外边距 */
}
</style>